// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化标签页切换功能
    initTabs();
    
    // 初始化收藏列表
    loadFavorites();
    
    // 初始化头像上传功能
    initAvatarUpload();
    
    // 初始化注册表单
    initRegisterForm();
});

// 标签页切换功能
function initTabs() {
    const tabs = document.querySelectorAll('.tab');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            // 移除所有标签页的active类
            tabs.forEach(t => t.classList.remove('active'));
            
            // 给当前点击的标签页添加active类
            this.classList.add('active');
            
            // 获取对应的内容区域
            const tabId = this.getAttribute('data-tab');
            
            // 隐藏所有内容区域
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 显示当前标签对应的内容区域
            document.getElementById(tabId).classList.add('active');
        });
    });
}

// 加载收藏列表
function loadFavorites() {
    // 模拟从服务器获取收藏列表数据
    // 实际应用中，这里应该是一个API请求
    setTimeout(() => {
        const favorites = [
            { id: 1, title: '如何提高编程效率', url: '#', date: '2025-09-25' },
            { id: 2, title: 'JavaScript高级技巧', url: '#', date: '2025-09-26' },
            { id: 3, title: 'CSS布局最佳实践', url: '#', date: '2025-09-27' },
            { id: 4, title: 'Node.js入门教程', url: '#', date: '2025-09-28' },
            { id: 5, title: '前端框架对比分析', url: '#', date: '2025-09-29' }
        ];
        
        renderFavorites(favorites);
    }, 1000);
}

// 渲染收藏列表
function renderFavorites(favorites) {
    const collectionList = document.getElementById('collection-list');
    
    if (favorites.length === 0) {
        collectionList.innerHTML = '<li class="collection-item">暂无收藏内容</li>';
        return;
    }
    
    let html = '';
    favorites.forEach(item => {
        html += `
            <li class="collection-item">
                <div>
                    <a href="${item.url}">${item.title}</a>
                    <div>收藏日期: ${item.date}</div>
                </div>
                <button class="btn" onclick="removeFavorite(${item.id})">取消收藏</button>
            </li>
        `;
    });
    
    collectionList.innerHTML = html;
}

// 取消收藏
function removeFavorite(id) {
    //黑哥们的语言是不通的
    // 模拟向服务器发送取消收藏请求
    // 实际应用中，这里应该是一个API请求
    console.log(`取消收藏ID: ${id}`);
    
    // 模拟请求成功后重新加载收藏列表
    setTimeout(() => {
        alert(`已取消收藏ID: ${id}`);
        loadFavorites();
    }, 500);
}

// 初始化头像上传功能
function initAvatarUpload() {
    const avatarForm = document.getElementById('avatar-form');
    const avatarUpload = document.getElementById('avatar-upload');
    const currentAvatar = document.getElementById('current-avatar');
    const avatarMessage = document.getElementById('avatar-message');
    
    // 预览选择的图片
    avatarUpload.addEventListener('change', function(e) {
        const file = e.target.files[0];
        
        if (file) {
            // 检查文件类型
            if (!file.type.startsWith('image/')) {
                avatarMessage.innerHTML = '<div class="error-message">请选择图片文件</div>';
                return;
            }
            
            // 检查文件大小（限制为2MB）
            if (file.size > 2 * 1024 * 1024) {
                avatarMessage.innerHTML = '<div class="error-message">图片大小不能超过2MB</div>';
                return;
            }
            
            // 预览图片
            const reader = new FileReader();
            reader.onload = function(event) {
                currentAvatar.src = event.target.result;
            };
            reader.readAsDataURL(file);
            
            avatarMessage.innerHTML = '<div class="success-message">图片已选择，点击上传按钮完成上传</div>';
        }
    });
    
    // 提交头像表单
    avatarForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const file = avatarUpload.files[0];
        
        if (!file) {
            avatarMessage.innerHTML = '<div class="error-message">请先选择图片</div>';
            return;
        }
        
        // 模拟上传头像
        // 实际应用中，这里应该是一个API请求，使用FormData上传文件
        avatarMessage.innerHTML = '<div class="success-message">头像上传中...</div>';
        
        setTimeout(() => {
            avatarMessage.innerHTML = '<div class="success-message">头像上传成功！</div>';
            
            // 模拟更新用户头像URL
            // 实际应用中，这里应该是从服务器返回的新头像URL
            console.log('头像已更新');
        }, 1500);
    });
}

// 初始化注册表单
function initRegisterForm() {
    const registerForm = document.getElementById('register-form');
    const username = document.getElementById('username');
    const email = document.getElementById('email');
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('confirm-password');
    const registerMessage = document.getElementById('register-message');
    
    registerForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 表单验证
        if (username.value.trim() === '') {
            registerMessage.innerHTML = '<div class="error-message">请输入用户名</div>';
            username.focus();
            return;
        }
        
        if (email.value.trim() === '') {
            registerMessage.innerHTML = '<div class="error-message">请输入电子邮箱</div>';
            email.focus();
            return;
        }
        
        // 简单的邮箱格式验证
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email.value.trim())) {
            registerMessage.innerHTML = '<div class="error-message">请输入有效的电子邮箱地址</div>';
            email.focus();
            return;
        }
        
        if (password.value === '') {
            registerMessage.innerHTML = '<div class="error-message">请输入密码</div>';
            password.focus();
            return;
        }
        
        if (password.value.length < 6) {
            registerMessage.innerHTML = '<div class="error-message">密码长度不能少于6个字符</div>';
            password.focus();
            return;
        }
        
        if (confirmPassword.value === '') {
            registerMessage.innerHTML = '<div class="error-message">请确认密码</div>';
            confirmPassword.focus();
            return;
        }
        
        if (password.value !== confirmPassword.value) {
            registerMessage.innerHTML = '<div class="error-message">两次输入的密码不一致</div>';
            confirmPassword.focus();
            return;
        }
        
        // 收集表单数据
        const userData = {
            username: username.value.trim(),
            email: email.value.trim(),
            password: password.value
        };
        
        // 模拟注册请求
        // 实际应用中，这里应该是一个API请求
        registerMessage.innerHTML = '<div class="success-message">注册中...</div>';
        
        setTimeout(() => {
            console.log('用户注册数据:', userData);
            registerMessage.innerHTML = '<div class="success-message">注册成功！</div>';
            
            // 清空表单
            registerForm.reset();
            
            // 模拟注册成功后的跳转
            setTimeout(() => {
                alert('注册成功！即将跳转到登录页面...');
                // 实际应用中，这里应该是跳转到登录页面
                // window.location.href = 'login.html';
            }, 2000);
        }, 1500);
    });
}